<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            /* 默认初始边距样式为0； */
            margin: 0px;
            padding: 0px;
        }
        .w{
            width: 1227px;
            margin: 0px auto;
        }
        #header{
            width: 100%;
            background-color: #333333;
        }
        .header{
            height: 40px;
            background-color: #333333;
            /* 盒子外边距为0；左右居中； */
            margin: 0px auto;
        }
        a{
            /* 去除a标签下划线 */
            text-decoration: none;
        }
        ul li{
            /* 去除列表表签格式 */
            list-style: none;
        }
        .header .left{
            float: left;
        }
        .header .left li{
            float: left;
        }
        .header .left  li a{
            display: inline-block;
            padding: 0px 10px 0px 0px;
            font-size: 11px;
            color: #a3a4a5;
            line-height: 40px;
        }
        .header .left li span{
            padding: 0px 10px 0px 0px;
            color: #5a5a57;
            line-height: 40px;
        }
        .header .left li a:hover{
            color: rgb(255, 255, 255);
        }
        .header .right{
            float: right;
        }
        .header .right li{
            float: left;
        }
        .header .right  li a{
            display: inline-block;
            padding: 0px 15px;
            font-size: 11px;
            color: #a3a4a5;
            line-height: 40px;
        }
        .header .right li span{
            line-height: 40px;
            color: #5a5a57;
        }
        .header .right li a:hover {
            color: rgb(255, 255, 255);
		}

        .header .right .cart{
            height: 40px;
            width: 126px;
            background-color: #424242;
            text-align: center;
        }
        .header .right .cart:hover{
            background-color: rgb(255, 255, 255);
        }
        .header .right .cart a:hover{
           color: #ff6700;
        }
        /* 导航栏结束 */
        .search{
            margin: 22px auto;
            height: 55px;
        }
        .logo{
            float: left;
            width: 55px;
        }
        .title{
            float: left;
            margin-left: 190px;
            width:680px;
        }
        .title li{
            float:left;
            margin-right: 22px;
            font-size: 15px;
            line-height: 55px;
        }
        .title li a{
            color:#333333;
        }
        .sou{
            float:right;
            height: 55px;
            width: 298px;
        }
        .sou input{
            float: left;
            padding-left: 15px;
            height: 49px;
            width: 231px;
            font-size: 14px;
            color: #757575;
            border:1px solid #e0e0e0;
            border-right: 0px;
            outline-color: #ff6700;
        }
        .sou button{
            float: left;
            height: 51px;
            width: 50px;
            border:1px solid #e0e0e0;
            border-top: 0px;
            border-left: 0px;
            background-image: url(img/2.png);
            outline-color: #ff6700;
        }
        .title li a:hover{
            color: #ff6700;;
        }
        /* 搜索部分结束 */
        .content_a{
            height: 460px;
        }
        .content_l{
            float: left;
            width: 235px;
            height: 460px;
            background-color: #979b9d;
        }
        .content_l div{
            height: 43px;
            width: 235px;
            line-height: 43px;
            font-weight: 3px;
        }
        .content_l #top{
            margin-top: 20px;
        }
        .content_l li{
            float: left;
            margin-left: 31px;
            width: 150px;
            font-size: 14px;
            color: #f2f2f2;
        }
        .content_l span{
            float: right;
            margin-right: 23px;
            font-size: 14px;
            color: #f2f2f2;
        }
        .content_l div:hover{
            background-color:  #ff6700;
        }
        .content_r {
            float: left;
            position: relative;
            width: 992px;
            height: 460px;
        }
        .content_r .al{
            position: absolute;
            top: 198px;
            width: 45px;
            height: 64px;
            font-size: 40px;
            text-align: center;
            line-height: 58px;
            color: #f5f5f5;
        }
        .content_r .ar{
            position: absolute;
            top: 198px;
            right: 0px;
            width: 45px;
            height: 64px;
            font-size: 40px;
            text-align: center;
            line-height: 58px;
            color: #f5f5f5;
        }
        .content_r .al:hover{
            color: #ffffff;
            background-color: #5f5750;
        }
        .content_r .ar:hover{
            color: #ffffff;
            background-color: #5f5750;
        }
        .content_r div{
            width: 992px;
            height: 460px;
        }
        .content_r ul{
            position: absolute;
            bottom: 20px;
            right: 15px;
            width: 120px;
            height: 16px;
            border-radius: 8px;

        }
        .content_r ul li{
            float: left;
            margin: 3px 6px;
            width: 8px;
            height: 8px;
            border-radius: 7px;
            border: 2px solid #adaba8;
            background-color: #838e94;
        }
        .content_r ul li:hover{
            background-color: #ffffff;
        }
        /* 内容1结束 */
        .content_b{
            margin-top: 14px;
            height: 170px;
        }
        .content_b div{
            float: left;
            margin-left: 14px;
        }
        .content_b img{
            width: 316px;
            height: 170px;
        }
        .content_b .l{
            margin-left: 0px;
        }
        .content_b .l img{
            width: 234px;
            height: 170px;
        }
        /* 内容2结束 */
        .content_c .t{
            margin-top: 22px;
            margin-bottom: 38px;
        }
        .content_c .t img{
            width: 1227px;
            height: 120px;
        }
        .text{
            height: 22px;
            margin-bottom: 20px;
        }
        .text li{
            color: #000;
        }
        .text #l{
            float: left;
            font-size: 22px;
        }
        .text #r{
            float:right;
            font-size: 15px;
            line-height: 22px;
        }
        .text #r a{
            color: #000;
        }
        .text #r a:hover{
            color:  #ff6700;
        }
          /* 内容3结束 */
        .phone{
            height: 615px;
            background-color: #f5f5f5;
        }
        .phone .l_img{
            float: left;
            width: 232px;
            height: 615px;
        }
        .l_img img{
            float: left;
            width: 232px;
            height: 615px;
        }
        .phone ul{
            float:left;
            width: 995px;
            height: 615px;
        }
        .r_img li{
            float: left;
            margin-left: 13px;
            width: 235px;
            height: 298px;
            background-color:#ffffff;
        }
        .r_img li img{
            width: 130px;
            height: 124px;
            margin: 37px 70px 0px 55px;
        }
        .up{
            margin-top: 20px;
        }
        .r_img li div{
            margin-top: 20px;
            width: 235px;
            text-align: center;
            font-size: 14px;
        }
        .r_img li .describe{
            margin-top: 0px;
            width: 235px;
            text-align: center;
            font-size: 10px;
            color: #b0b0b0;
        }
        .r_img li .price{
            width: 235px;
            text-align: center;
            font-size: 14px;
            color:  #ff6700;
        }
        .r_img li .price del{
            color: #b0b0b0;
            font-size: 12px;
        }
        /* 内容4结束 */
        .ending{
            margin-top: 30px;
            height: 300px;
            background-color: #ffffff;
        }
        .ending ul{
            height: 79px;
        }
        .ending ul li{
            float: left;
            margin:0px 67px;
            line-height: 79px;
            color: #616166;
        }
        .ending ul span{
            float: left;
            font-size: 20px;
            line-height: 79px;
            color: #616166;
        }
        .ending .tail{
            height: 263px;
            background-color: #ffffff;
        }
        .ending .tail dl{
            float: left;
            margin-right: 100px;
            margin-top: 20px;
        }
        .ending .tail dl dt{
            font-size: 14px;
            color: #424242;
            line-height: 50px;
        }
        .ending .tail dl dd{
            font-size: 11px;
            color: #757575;
            line-height: 12px;
        }
        .tail .last{
            float: right;
            width: 250px;
            height: 343px;
        }
        .last #z{
            margin-top: 40px;
            font-size: 20px;
            color:  #ff6700;;
            text-align: center;
        }
        .last #x{
            margin-top: 15px;
            font-size: 14px;
            color: #757575;
            text-align: center;
        }
        .last #c{
            margin:30px auto;
            width: 100px;
            height: 30px;
            font-size: 16px;
            color:  #ff6700;
            border: 1px solid  #ff6700;
            text-align: center;
            line-height: 30px;
        }
        .ending ul li:hover{
            color: #ff6700;
        }
        .ending .tail dl dd:hover{
            color: #ff6700;
        }
        .last #c:hover{
            color: #ffffff;
            background-color:  #ff6700;
        }
    </style>
</head>
<body>
    <!-- 导航栏部分 -->
    <div id="header">
        <div class="header w">
            <ul class="left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">小爱开放品台</a><span>|</span></li>
                <li><a href="#">天星科技</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li><a href="#">下载APP</a><span>|</span></li>
                <li><a href="#">智能生活</a><span>|</span></li>
            </ul>
            <ul class="right">
                <li><a href="#">登入</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart"><a href="#">购物车</a></li>
            </ul>
        </div>
    </div>
    <!-- 搜索部分 -->
    <div class="search w">
        <div class="logo"><a href="#"><img src="img/1.png"></a></div>
        <ul class="title">
            <li><a href="#">小米手机</a></li>
            <li><a href="#">Redmi手机</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="sou"><input type="text" value="手机"><button></button></div>
    </div>
    <!-- 内容1 -->
    <div class="content_a w">
        <ul class="content_l">
            <div id="top"><li>手机 电话卡</li><span>></span></div>
            <div><li>电视 盒子</li><span>></span></div>
            <div><li>笔记本 显示器</li><span>></span></div>
            <div><li>家电 插线板</li><span>></span></div>
            <div><li>出行 穿戴</li><span>></span></div>
            <div><li>智能 路由器</li><span>></span></div>
            <div><li>电源 配件</li><span>></span></div>
            <div><li>健康 儿童</li><span>></span></div>
            <div><li>耳机 音响</li><span>></span></div>
            <div><li>生活 箱包</li><span>></span></div>
        </ul>
        <div class="content_r">
            <div><img src="img/3.png"></div>
            <a class="al" href="#"><</a>
            <a class="ar" href="#">></a>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- 内容2 -->
    <div class="content_b w">
        <div class="l"><a href="#"><img src="img/4.png"></a></div>
        <div><a href="#"><img src="img/5.png"></a></div>
        <div><a href="#"><img src="img/6.png"></a></div>
        <div><a href="#"><img src="img/7.png"></a></div>
    </div>
    <!-- 内容3 -->
    <div class="content_c w">
        <div class="t w"><a href="#"><img src="img/8.png"></a></div>
        <ul class="text w">
            <li id="l">手机</li>
            <li id="r"><a href="#">查看更多&nbsp;&nbsp;&nbsp;></a></li>
        </ul>
    </div>
    <!-- 内容四 -->
    <div class="phone w">
        <div class="l_img"><a href="#"><img src="img/9.png"></a></div>
        <ul class="r_img">
                <li><a href="#"><img src="img/10.png"><div>黑鲨4Pro</div><div class="describe">黑鲨4Pro</div><div class="price">3999元起</div></a></li>
                <li><a href="#"><img src="img/11.png"><div>黑鲨4</div><div class="describe">黑鲨4&nbsp;磁动力升降肩键</div><div class="price">2499起</div></a></li>
                <li><a href="#"><img src="img/12.png"><div>小米10s</div><div class="describe">骁龙870&nbsp;|&nbsp;对称式双扬立体声</div><div class="price">3299元起</div></a></li>
                <li><a href="#"><img src="img/13.png"><div>Redmi&nbsp;K40系列</div><div class="describe">骁龙888&nbsp;/&nbsp;E4旗舰直屏</div><div class="price">2399元起</div></a></li>
                <li class="up"><a href="#"><img src="img/14.png"><div>Redmi&nbsp;K40</div><div class="describe">骁龙870，新一代AMOLED旗舰直屏</div><div class="price">1999元起</div></a></li>
                <li class="up"><a href="#"><img src="img/15.png"><div>小米11</div><div class="describe">骁龙888&nbsp;|&nbsp;2K四曲直屏</div><div class="price">3999元起</div></a></li>
                <li class="up"><a href="#"><img src="img/16.png"><div>小米10</div><div class="describe">骁龙865/一亿像素相机</div><div class="price">3399元起&nbsp;<del>3999元</del></div></a></li>
                <li class="up"><a href="#"><img src="img/17.png"><div>Note&nbsp;9Pro</div><div class="describe">一亿像素夜景相机</div><div class="price">1599元起</div></a></li>
            </ul>
    </div>
    <!-- 结尾 -->
    <div class="ending w">
        <ul>
            <li>预约维修服务</li><span>|</span>
            <li>七天无理由退货</li><span>|</span>
            <li>15天免费换货</li><span>|</span>
            <li>满99包邮</li><span>|</span>
            <li>520余家售后网点</li>
        </ul>
        <hr>
        <div class="tail">
            <dl>
                <dt>帮助中心</dt><br>
                    <dd>账户管理</dd><br>
                    <dd>购物指南</dd><br>
                    <dd>订单操作</dd><br>
            </dl>
            <dl>
                <dt>服务支持</dt><br>
                    <dd>售后政策</dd><br>
                    <dd>自助服务</dd><br>
                    <dd>相关下载</dd><br>
            </dl>
            <dl>
                <dt>线下门店</dt><br>
                    <dd>小米之家</dd><br>
                    <dd>服务地点</dd><br>
                    <dd>授权体验店</dd><br>
            </dl>
            <dl>
                <dt>关于小米</dt><br>
                    <dd>了解小米</dd><br>
                    <dd>加入小米</dd><br>
                    <dd>投入者关系</dd><br>
                    <dd>企业责任</dd><br>
                    <dd>廉洁举报</dd><br>
            </dl>
            <dl>
                <dt>关注我们</dt><br>
                    <dd>新浪微博</dd><br>
                    <dd>官方微信</dd><br>
                    <dd>联系我们</dd><br>
                    <dd>公益金基金会</dd><br>
            </dl>
            <dl>
                <dt>特色服务</dt><br>
                    <dd>F码通道</dd><br>
                    <dd>礼物码</dd><br>
                    <dd>防伪查询</dd><br>
            </dl>
            <div class="last">
                <p id="z">400-100-5678</p>
                <p id="x">8:00-18:00(仅收市话费)</p>
                <p id="c">人工服务</p>
            </div>
        </div>
    </div>
</body>
</html>